<template>
  <div class="renShuFenBu">
    <div class="top-tools">
      <h3>各课程体系参与人数分布</h3>
      <!-- <div class="select-school">
        <el-select v-model="school" placeholder="选择学院">
          <el-option value="本科生院">本科生院</el-option>
        </el-select>
      </div> -->
    </div>
    <div id="renShuFenBu"></div>
  </div>
</template>

<script>
import {DataView} from "@antv/data-set";
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      school: "本科生院",
      data: [
        { item: "多彩青春计划", 参与人数: 1671},
        { item: "红色筑梦计划", 参与人数: 14672},
        { item: "其他", 参与人数: 1675},
        { item: "师长领航计划", 参与人数: 62},
        { item: "全球胜任力计划", 参与人数: 73},
        { item: "双创引领计划", 参与人数: 1},
        { item: "春粟劳育计划", 参与人数: 40},
        { item: "经典悦读计划", 参与人数: 30}
      ]
    };
  },
  methods: {
    createChart() {
      const dv = new DataView().source(this.data);
      dv.transform({
        type: "fold",
        fields: ["参与人数"], // 展开字段集
        key: "user", // key字段
        value: "score" // value字段
      });

      const chart = new Chart({
        container: "renShuFenBu",
        autoFit: true,
        height: 300
      });
      chart.data(dv.rows);
      chart.scale("score", {
        min: 0,
        max: 15000,
        tickInterval: 3000,
        
      });
      chart.coordinate("polar", {
        radius: 0.8
      });
      chart.legend(false)
      chart.tooltip({
        shared: true,
        showCrosshairs: true,
        crosshairs: {
          line: {
            style: {
              lineDash: [4, 4],
              stroke: "#333"
            }
          }
        }
      });
      chart.axis("item", {
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              fill: "#fff"
            }
          }
        },
        label:{
            style: {
              fill: "#fff",
              fontSize:14
            }
        }
      });
      chart.axis("score", {
        line: null,
        tickLine: null,
        grid: {
          line: {
            type: "line",
            style: {
              lineDash: null
            }
          }
        },
        label:{
            style: {
              fill: "#fff"
            }
        }
      });

      chart
        .line()
        .position("item*score")
        .color("user")
        .size(2);
      chart
        .point()
        .position("item*score")
        .color("user")
        .shape("circle")
        .size(4)
        .style({
          stroke: "#fff",
          lineWidth: 1,
          fillOpacity: 1
        });
      chart
        .area()
        .position("item*score")
        .color("user");
      chart.render();
    }
  },
  mounted() {
    this.createChart();
  }
};
</script>

<style lang="scss" scoped>
.renShuFenBu {
  padding: 12px 20px;
  .top-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      padding-left: 10px;
      border-left: 4px solid #00ffee;
    }
  }
}
</style>
<style>
.el-input__inner{
    width: 144px;
    height: 34px;
    border-color:#2A55FF ;
    background: #2A55FF;
    color: #fff;
}
</style>